import React, { Component } from "react";
import { View, Text, StyleSheet, FlatList, TouchableWithoutFeedback, Image, ActivityIndicator } from "react-native";
import * as RootNavigation from "../../../App";
import NetUtil from "../../net/net_util";

export default class JobTypeList extends Component{
  constructor(props) {
    super(props);
    this.page={
      pageNum:1,
      pageSize:10
    };
    this.state={
      type:1,
      status:'',
      refreshing:false,
      isMoreLoading:true,
      loading:false,
      dataList:[],
      statusList:[{
        label:'征稿中',
        value:1
      },{
        label:'选稿中',
        value:2
      },{
        label:'公示中',
        value:3
      },{
        label:'已结束',
        value:4
      }]
    }
  }
  componentDidMount() {
    this.setState({
      type:this.props.type,
      status:this.props.status?this.props.status:''
    },()=>{
      this.getWorkList()
    })
  }

  /*重新加载*/
  reload(type){
    this.page.pageNum=1;
    this.setState({type:type,dataList:[],isMoreLoading:true},()=>{
      this.getWorkList()
    })
  }
  /*获取兼职列表*/
  getWorkList(){
    let url=this.state.type=1?'work/job/my/page':'work/job/join/page'
    let params={
      'status':this.state.status,
      'pageNum':this.state.pageNum,
      'pageSize':this.state.pageSize
    }
    this.loading=true
    NetUtil.get(url,params,(res)=>{
      this.loading=false
      if(res.code==200){
        let list=this.state.dataList
        if(this.page.pageNum==1){
          list=[]
        }
        this.setState({
          dataList:list.concat(res.data.data),
          isMoreLoading:res.data.data.length<10?false:true
        })
      }
      setTimeout(()=>{
        this.setState({refreshing:false})
      },500)
    })
  }

  _onRefresh(){
    this.setState({refreshing:true})
    this.page.pageNum=1
    this.getWorkList()
  }

  _endReached(){
    if(!this.state.isMoreLoading||this.state.loading)return;
    this.page.pageNum++;
    this.getWorkList();
  }

  jobDetail(id){
    RootNavigation.navigate('jobDetail',{jobId:id})
  }
  _renderItem=(info)=>{
    let item=info.item
    let statusObj=this.state.statusList.find((status)=>{
      return status.value==item.status
    })
    return (
      <TouchableWithoutFeedback onPress={this.jobDetail.bind(this,item.id)}>
        <View style={styles.cell}>
          <Image style={styles.logo} source={{uri:item.avatar}}></Image>
          <View style={styles.workInfo}>
            <View style={styles.titleBox}>
              <View style={[styles.flexBox]}>
                {item.hot==1?<Image style={styles.hot} source={require('../../img/hot_work_icon.png')}></Image>:null}
                <Text style={styles.title}>{item.title}</Text>
              </View>
              <Text style={styles.score}>{item.points}积分</Text>
            </View>
            <View style={styles.tags}>
              <Text style={styles.tag}>{item.skillName}</Text>
              <Text style={styles.tag}>{item.industryName}</Text>
            </View>
            <View style={[styles.flexBox,{justifyContent:'space-between',marginTop:12}]}>
              <Text style={{color:'#A5A5A5',fontSize:11}}>截稿时间：{item.deadlineTime} · <Text style={{color:'#FC3D3D',fontSize:11}}>{statusObj?statusObj.label:''}</Text></Text>
              <Text style={{color:'#A5A5A5',fontSize:11}}>参与人数：{item.joinNum}</Text>
            </View>
            <Text style={styles.des}>{item.content}</Text>
            <View style={styles.menu}>
              <View style={styles.menuItem}><Image style={styles.menuIcon} source={require('../../img/work_share_icon.png')}></Image><Text>{item.shareNum}</Text></View>
              <View style={[styles.menuItem,{justifyContent:'center'}]}><Image style={styles.menuIcon} source={require('../../img/work_favor_icon.png')}></Image><Text>{item.likeNum}</Text></View>
              <View style={[styles.menuItem,{justifyContent:'flex-end'}]}><Image style={styles.menuIcon} source={require('../../img/work_message_icon.png')}></Image><Text>{item.commentNum}</Text></View>
            </View>
          </View>
        </View>
      </TouchableWithoutFeedback>
    )
  }

  _renderItemSeparator(){
    return (
      <View style={{height:5,backgroundColor:'#F6F6F6'}}></View>
    )
  }

  renderFooter(){
    if(this.state.isMoreLoading){
      return(
        <View style={{marginVertical: 10}}>
          <ActivityIndicator color="#999999"/>
        </View>
      )
    }else{
      return(
        <View style={{marginVertical: 10,justifyContent:'center',alignItems:'center'}}>
          <Text style={{color:'#999999'}}>没有更多了。</Text>
        </View>
      )
    }
  }

  render() {
    return (
      <View style={{flex:1 ,width:'100%',backgroundColor:'#F6F6F6'}}>
        <FlatList style={{paddingTop:5}} data={this.state.dataList}
                  ListFooterComponent={()=>this.renderFooter()}
                  onEndReachedThreshold = {0.2} //当距离内容比例不足内容0.1比例时触发onEndReached
                  onRefresh = {this._onRefresh.bind(this)}
                  onEndReached = {this._endReached.bind(this)} //上拉加载数据
                  refreshing = {this.state.refreshing}
                  keyExtractor={(item)=>{return `page_${this.state.status}_${item.id}`}}
                  ItemSeparatorComponent={this._renderItemSeparator}
                  renderItem={this._renderItem}>
        </FlatList>
      </View>
    )
  }
}
const styles=StyleSheet.create({
  cell:{
    flexDirection:'row',
    justifyContent:'flex-start',
    paddingHorizontal:14,
    paddingTop:22,
    backgroundColor:'#fff'
  },
  logo:{
    width: 49,
    height:49,
    borderRadius:7
  },
  workInfo:{
    marginLeft: 12,
    flex:1
  },
  titleBox:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center'
  },
  flexBox:{
    flexDirection:'row',
    justifyContent:'flex-start',
  },
  hot:{
    width:16,
    height:16,
    marginRight:5
  },
  title:{
    color:'#0F0F0F',
    fontSize: 15,
    fontWeight:'500'
  },
  score:{
    color:'#E39354',
    fontSize:15,
    fontWeight: '500'
  },
  tags:{
    flexDirection:'row',
    marginTop: 8,
    justifyContent:'flex-start',
    flexWrap:'wrap',
    width:'100%',
  },
  tag:{
    backgroundColor:'#F6F6F6',
    color:'#3F3F3F',
    fontSize:11,
    height:19,
    lineHeight: 19,
    textAlign: 'center',
    paddingHorizontal:5,
    borderRadius:3,
    marginRight:4,
    marginBottom:5
  },
  des:{
    color:'#3F3F3F',
    fontSize:11,
    marginTop: 17
  },
  menu:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    height:50,
    borderTopWidth:1,
    borderTopStyle:'solid',
    borderTopColor:'#F6F6F6',
    marginTop:15
  },
  menuItem:{
    flex:1,
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center'
  },
  menuIcon:{
    width:18,
    height:18,
    marginRight:8
  },
})
